50 مشروع جاهز ل سكيتشوير Zip

Code Box

بسم الله الرحمن الرحيم

مقدمة

السلام عليكم ورحمة الله وبركاتة وأهلا ومرحبا بكم في مقال جديد من مدونة سكيتشوير بالمصري نقدم اليوم حل لمشكلة قد تواجه العديد من مدونين بلوجر وأيضا يمكن تطبيق نفس الطريقة علي مدونات ووردبريس ومانقدمة اليوم هو عبارة عن صندوق ينسق الأكواد داخله بإستخدام HTML,Css,JavaScript. 

بمعني إذا كان لديك مقال أو موضوع تود إدراج كود داخله فالأفضل أستخدام هذا الصندوق كما أنه يعطي جمالاً لمظهر مقالاتك حتي لا يصبح الكود غير منسق وعند نسخه من مدونتك بدون هذا الصندوق سينسخ بطريقة خاطئة.

وهذا قد يسبب مشكلة لك مع زوارك وقد تفقد ثقتهم بما تقدمة من محتوي وستلاحظ عند الضغط مطولا علي ماداخل الصندوق واختيار تحديد الكل سوف يحدد ما داخل الصندوق فقط وأيضاً عبر زر النسخ أسفله يمكنك معاينة الإضافة مباشراً في أخر المقال.

تركيب الإضافة

كل ماعليك هو التوجه إلى لوحة التحكم ببلوجر > المشاركات > مشاركة جديدة > Html > ثم الصق الكود التالي في المكان الذي تراه مناسب داخل مقالك.

<div align="left" style="margin:10px; padding-left:10px; "> <form> <!-- Code By | Mo Hisham With ♡ --> <textarea cols="10" id="code-box" readonly="" rows="10" style="background: rgb(255, 255, 255); border-color: #3560AB; border-style: solid; border-width: 2px 2px 2px 5px; color: red; direction: ltr; font-family: &quot;Fira Code&quot;; outline-color: yellow; padding: 5px 5px 5px 15px; width: 90%;"> Your Code Here </textarea> </form> <button onclick="document.getElementById('code-box')
.select(); document.execCommand('copy'); window.alert('تم النسخ✔'); " style="background: #3560AB; border: none; color: white; cursor: pointer; font-size: 12px; font-weight: normal; height: 20px; outline-color: yellow; padding: 5px;"><i class="fa fa-copy"> نسخ الكل </i></button> </div>

تعديل الإضافة

عدل ما يأتي بما يناسبك

1. أستبدل كلمة "Your Code Here" بالكود الذي ترغب في إضافته.
2. أستبدل كود اللون 3560AB# لتغيير لون حدود الصندوق الخاص بعنصر textarea.
3. أستبدل كود اللون 3560AB# لتغيير لون الزر الخاص بعنصر button.
4. أستبدل القيمة ذات الرقم  10 للواصفتين rows و cols وهي تخص عرض وأرتفاع أسطر الصندوق أو عنصر textarea.
5. إذا أردت إضافة أكثر من كود واحد في نفس المقال قم في كل مرة بتغيير ID الخاص بالعنصر textarea ، في الكود تجد الأي دي  هو "code-box" و قد تكرر مرتين.
6. قم بحذف السطر التالي لإلغاء مربع حوار رسالة تم النسخ.

window.alert('تم النسخ');

معاينة الإضافة

والسلام عليكم ورحمة الله وبركاته